<template>
    <div class="body">
        <VHeader title='我要点单' />
        <div class="order">
            <h3>填写点单信息</h3>
            <div class="form">
                <p>
                    <span>*</span>
                    <span>点单标题:</span>
                </p>
                <div class="inp">
                    <input type="text" v-model="fromData.title">
                </div>
            </div>
            <div class="form">
                <p>
                    <span>*</span>
                    <span>点单内容:</span>
                </p>
                <div class="inp">
                    <textarea name="" id="" cols="30" rows="10" v-model="fromData.contents"></textarea>
                </div>
            </div>
            <div class="form">
                <p>
                    <span>*</span>
                    <span>联 系 人:</span>
                </p>
                <div class="inp">
                    <input type="text" v-model="fromData.contactName">
                </div>
            </div>
            <div class="form">
                <p>
                    <span>*</span>
                    <span>联系电话:</span>
                </p>
                <div class="inp">
                    <input type="text" v-model.number="fromData.contactMobile">
                </div>
            </div>
            <div class="form">
                <p>
                    <span></span>
                    <span>联系地址:</span>
                </p>
                <div class="inp">
                    <input type="text" v-model="fromData.contactAddress">
                </div>
            </div>
             <div class="btn">
                <button @click="save">确认提交</button>
                <button @click="$router.back()">返回</button>
            </div>
        </div>
    </div>
</template>

<script>
    import {Dialog} from 'vant';
    export default {
        name: '',
        components: {},
        data() { 
            return {
                id: this.$route.query.id,
                fromData: {
                    title: '',
                    contents: '',
                    contactName: '',
                    contactMobile: '',
                    contactAddress: ''
                },
            }
        },
        created() {},
        async mounted() {
            let res=await this.$http({
                method:'api.mine.index'
            })
            this.fromData.contactName = res.data.realName;
            this.fromData.contactMobile = res.data.mobile;
        },
        methods: {
            formVval () {
                for(let i in this.fromData){
                    if(!this.fromData[i]){
                        Dialog.alert({
                            title: '提示',
                            message: '请将信息填写完成'
                        })
                        return false;
                    }
                    return true;
                }
            },
            async save () {
                let val = this.formVval()
                if (val) {
                    await this.$http({
                        ...this.fromData,
                        method: 'api.diandan.submit',
                        id: this.id,
                    });
                    Dialog.alert({
                        title: '成功',
                        message: '已提交完成'
                    }).then(() => {
                        this.$router.push('/');
                    });
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
.body{
    padding: 0 0.2rem;
}
.order{
    padding: .2rem .4rem;
    h3{
        font-size:.28rem;
        font-family:Microsoft YaHei;
        font-weight:400;
        color:rgba(246,93,93,1);
        margin-bottom: .5rem;
    }
    .form{
        height: .68rem;
        display: flex;
        justify-content: space-between;
        margin-bottom: .17rem;
        p{
            width: 1.6rem;
            font-size:.24rem;
            font-weight:400;
            display: flex;
            span:nth-child(1){
                 color:rgba(246,93,93,1);
                 margin-right: .05rem;
                 align-self: center;
            }
            span:nth-child(2){
                flex: 1;
               color: #666666;
               margin-right: .32rem;
                 align-self: center;
                 text-align: right;
            }
        }
        .inp{
           flex: 1;
            height:.68rem;
            border:1px solid rgba(203,202,202,1);
            border-radius:.1rem;
            display: flex;
            input{
                border: 0;
                align-self: center;
                height: .65rem;
                margin-left: .1rem;
            }
        }
    }
    .form:nth-child(3){
            height:2.54rem;
            .inp{
                height: 100%;
                 border-radius:.1rem;
                  display: flex;
                  textarea{
                        border: 0;
                        height: 95%;
                        margin-left: .1rem;
                        align-self: center;
                    }
            }
        }
        .btn{
            margin-top: 1.4rem;
            display: flex;
            justify-content: space-between;
            button{
                width:3.14rem;
                height:.88rem;
                border-radius:.1rem;
                line-height: .88rem;
                text-align: center;
                font-size:.34rem;
                font-weight:400;
                color:rgba(255,255,255,1);
                border: 0;
            }
            button:nth-child(1){
                background:#F65D5D;
            }
            button:nth-child(2){
                background:#CBCACA;
            }
        }
}
</style>